<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
        // 1. 什么是虚拟Dom (用js对象来描述的一段Dom结构)
        // let box = document.getElementById('box')
        // console.dir(box)
        let vDom = {
            // 标签名称
            tagName: "div",
            // 属性
            props: {
                id: "box",
                // class为className
                className: "oBox"
            },
            // 子节点
            children: [
                // 文本节点
                "我是一个盒子",
                // 标签
                {
                    tagName: "h3",
                    props: {
                        style: {
                            color: "red",
                            background: 'orange'
                        }
                    },
                    children: ["我是h标签"]
                },
                "我是二个盒子",
            ]
        }

        // 2. 把虚拟Dom转换为真实Dom
        
        // 1. 参数
        // 2. 返回值
        // 3. this
        // 4. 函数的功能
        const vDomToRDom = (vDom) => {
            const { tagName, props, children } = vDom
            // 1. 根据标签名称生成真实的Dom结构
            const realDom = document.createElement(tagName)
            // 2. 循环props给真实Dom结构添加属性
            // ["id", "class"]
            Object.keys(props).forEach(item => {
                // 添加的属性为style的时候
                if (item === 'style') {
                    console.log(props[item])
                    Object.keys(props[item]).forEach(styleProp => {
                        realDom.style[styleProp] = props[item][styleProp]
                    })
                    // realDom[item] = props[item]
                } else {
                    realDom[item] = props[item]
                }
            })
            // 3. 循环添加子节点
            children.forEach(item => {
                // 添加的内容是文本节点
                if (typeof item === "string") {
                    // 创建文本节点
                    const text = document.createTextNode(item)
                    realDom.appendChild(text)
                } else {
                    // 标签
                    // 通过递归调用
                    // <span>111</span>
                    realDom.appendChild(vDomToRDom(item))
                }
            })
            return realDom
        }

        let dom = vDomToRDom(vDom)
        document.body.appendChild(dom)

    </script>
</body>
</html>